<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>馆藏分类</title>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/guancangfenlei.css">
  <link rel="stylesheet" href="../css/caidanlan.css">
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../javaScript/utl.js"></script>
  <script src="../javaScript/data_management.js"></script>
  <script src="../javaScript/quanxianpanduan.js"></script>
</head>

<body>
  <div class="container-fulid">
    <div class="row shouhang">
      <span class="iconfont icon-ziliaoku"></span>
      <p>图书馆后台管理系统</p>
      <div id='yonghu'>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 caidan">
        <a href="../html/jueseguanli.html">
          <p> 角色管理</p>
        </a>
        <a href="../html/guanliyuanguanli.html">
          <p>管理员管理</p>
        </a>
        <a href="./quanxianguanli.html">
          <p>权限管理</p>
        </a>
        <a href="../html/ReaderUser.html">
          <p>读者用户</p>
        </a>
        <a href="../html/duzhejuese.html">
          <p>读者角色</p>
        </a>
        <a href="../html/yuedu.html">
          <p>借阅查询</p>
        </a>
        <a href="../html/jieyueguanli.html">
          <p>借阅管理</p>
        </a>
        <a href="../html/book-management.html">
          <p>书刊管理</p>
        </a>
        <a href="../html/guancangdizhi.html">
          <p>馆藏地址管理</p>
        </a>
        <a href="../html/guancangfenlei.html">
          <p>馆藏分类管理</p>
        </a>
        <a href="../html/cengjiaLabel.html">
          <p>层架标签配置</p>
        </a>
        <a href="../html/fenguanshezhi.html">
          <p>分馆配置</p>
        </a>
        <a href="../html/book_inventory.html">
          <p>图书盘点</p>
        </a>
        <a href="../html/dindanguanli.html">
          <p>订单管理</p>
        </a>
        <a href="../html/tushuguanshezi.html">
          <p>图书馆设置</p>
        </a>
      </div>
      <div class="col-md-10">
        <div class="suoyin">
          <div class="row">
            <p><a href="./shouye.html">首页</a><span><a href="./guancangfenlei.html">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;馆藏分类管理</a></span></p>
         </div>
        </div>
      <div class="btns clear">
        <div class="yellow add">新增</div>
        <div class="yellow bianji">编辑</div>
        <div class="del">删除</div>
      </div>
      <div class="kuang">
        <div class="banner_1 clear">
          <p>馆藏分类</p>
          <div>保存</div>
        </div>
        <div class="banner_2">
     
        </div>
      </div>
      </div>
    </div>
  </div>
      <!-- 添加的模态框 -->
<div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" id="addModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span>
        </button>
        <div id="exampleModalLabel">添加馆藏分类</div>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">*分类名称:</label>
            <input type="text" class="form-control" id="shuru">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="quxiao()">取消<tton>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="queding()">确定<tton>
      </div>
    </div>
  </div>
</div>
<!-- 删除的模态框 -->

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <p>请确认是否要删除该数据信息，删除后则该数据信息不再显示。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="queding1()">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 修改的模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span>
        </button>
        <div id="exampleModalLabel">修改馆藏分类</div>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">*分类名称:</label>
            <input type="text" class="form-control" id="shuru_1">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消<tton>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="queding2()">确定<tton>
      </div>
    </div>
  </div>
</div>

  <script>
  
    var toggle = true
    var updateId
    isLogin()
    let guanliname=glqx('馆藏分类管理')
    yonghu()


    setData('fenleiData',JSON.stringify(fenleiData))
    let fenlei
    fenlei = JSON.parse(getData('fenleiData'))
    function showData(data){
      $('.banner_2').html('')
    $.each(data, (index, item) => {
      $('.banner_2').append(`
      <div class="checkbox_1">
      <input class="checkbox_2" type="checkbox">&nbsp;&nbsp;${item.name}
      <button data-item='${JSON.stringify(item)}' class="change" onclick='gai(${item.id})'>修改</button>
      </div>
      `)
    })
  }
    showData(fenlei)
    function tianjia(){
      if(czqx(guanliname,'新增')){
          return
        }
    $('.btns .add').click(function() {
      $('#addModalLabel').modal("show")
    })
  }
  tianjia()
    function Delate(){
      if(czqx(guanliname,'删除')){
          return
        }
    $('.btns .del').click(function() {
      $('#mySmallModalLabel').modal("show")
    })
  }
  Delate()
  function xiugai(){
    if(czqx(guanliname,'编辑')){
          return
        }
    $('.btns .bianji').click(function() {
      if(toggle){
      $('.change').css({
        display:'inline-block'
      })
      toggle = false
      return
    }{
      $('.change').css({
        display:'none'
      })
      toggle = true
    }
    })
  }
  xiugai()
    function gai(id){
      updateId = id
      $('#exampleModal').modal("show")
        let obj = JSON.parse($(this).attr('data-item'))
        $('#shuru_1')[0].value=obj.name
    }
 
    function queding(){
      let num,str
      num=fenlei.length + 1
      str = $('#shuru')[0].value
      fenlei.push({name:str,id:num})
      showData(fenlei)
    }
    function queding1(){
      for(let i=0;i<fenlei.length;i++){
        if($('.checkbox_2')[i].checked==true){
          $('.checkbox_1').eq(i).remove();
          fenlei.splice(i,1)        
          i--
        }
      }
    }
    function queding2(){ 
    for (let i = 0; i < fenlei.length; i++) {
      if(fenlei[i].id == updateId){
      fenlei[i].name=$('#shuru_1')[0].value
      break;
        }
      }
     showData(fenlei)
   }
   function quxiao(){
    $('#shuru').val('')
   }
  </script>
</body>